<script setup lang="tsx">
import { onMounted, reactive } from 'vue';
import { createMenuApi, deleteMenuApi, getMenuListApi, updateMenuApi } from '@/service/path/menu';
import { useCrud } from '@/hooks/common/crud';
import { postAction } from '@/service/request/action';
import { useLoading } from '@sa/hooks';
import MenuModal from '@/views/system/menu/modules/menu-modal.vue';

const {loading, startLoading, endLoading} = useLoading();
const state = reactive({
  dataList: [],
  opPath: {
    createPath: createMenuApi,
    updatePath: updateMenuApi
  },
  columns: [
    {
      title: '菜单名称',
      key: 'title'
    },
    {
      title: '地址',
      key: 'path'
    },
    {
      title: '组件name',
      key: 'name'
    },
    {
      title: '组件地址',
      key: 'component'
    },
    {
      title: '图标',
      key: 'localIcon',
      render: (row: Api.Auth.Menu) => <svg-icon local-icon={row.localIcon} />
    },
    {
      title: '排序',
      key: 'order'
    },
    {
      title: '是否隐藏',
      key: 'isHide',
      render: (row: Api.Auth.Menu) => {
        return row.isHide === 0 ? '显示' : '隐藏';
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (row: Api.Auth.Menu) => <common-operate-column
        row-data={row} onClickEdit={row => clickEdit(row.id, row)}
        onClickDelete={row => clickDelete(row.id)}
      />
    }
  ]
});
const getMenuList = () => {
  startLoading();
  postAction(getMenuListApi, {}).then(res => {
    endLoading();
    if (!res.error) {
      state.dataList = res.data;
    }
  })
};
const {
  modalFormRef, childRef, clickAdd, clickEdit, clickDelete
} = useCrud({
  uris: {
    delete: deleteMenuApi
  },
  refreshList: getMenuList
});
onMounted(() => {
  getMenuList();
});
</script>

<template>
  <div class="menu-container">
    <n-card title="菜单列表">
      <div class="flex flex-justify-end">
        <n-button size="small" ghost type="primary" @click="clickAdd">
          <template #icon>
            <icon-ic-round-plus class="text-icon" />
          </template>
          添加菜单
        </n-button>
      </div>
      <n-data-table
        class="mt4"
        :columns="state.columns"
        :data="state.dataList"
        :loading="loading"
        :row-key="row => row.key"
      />
    </n-card>
    <CommonModal ref="modalFormRef" title="菜单" :op-path="state.opPath" @refresh-list="getMenuList">
      <MenuModal ref="childRef"  :menu-list="state.dataList"/>
    </CommonModal>
  </div>
</template>

<style scoped>

</style>
